<template>
   <!-- :class="{'dialog-max__padding':level==5?false:true}" -->
  <el-dialog v-if="show" :visible="true" title="管理范围" center="center" width="fit-content"
    :before-close="cancel" :close-on-click-modal="false">
    <div style="margin-bottom:4px">
      <el-button icon="el-icon-plus" type="success" plain size="medium" circle @click="add">
      </el-button>
    </div>
    <el-table :data="list" style="width: max-content;" max-height="600px">
      <el-table-column label="操作" width="70" align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-minus" type="danger" plain size="medium" circle @click="sub(scope.$index)">
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="地区" width="400" align="center">
        <template slot-scope="scope">
          <Address :key="scope.row.key"  :level="level" :addressList="fromatAddressList(scope.row)" style="width:300px"
            @getAddress="getAddress" :index="scope.$index" :isCheckStrictly="true"></Address>
        </template>
      </el-table-column>
      <el-table-column label="小区" width="320" align="center" v-if="level == 5">
        <template slot-scope="scope">
          <el-select v-model="scope.row.villageId" style="width: 240px;" @focus="getVillage(scope.row,scope.$index)" clearable
            @change="handleVillageChange(scope.row)">
            <el-option v-for=" item in scope.row.villageList " :value="item.id" :label="item.name" :key="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer">
      <el-button plain type="primary" @click="confirm">保 存</el-button>
      <el-button plain @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Address from "./Address"
import VillageApi from "@/api/address/village";
import { nanoid } from "nanoid";
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    },
    level: {
      type: Number,
      default: 5
    },

  },
  watch: {
    show: {
      handler(val) {
        if (val) {
          this.list.forEach(item => {
            if(item.villageId){
              this.$set(item, 'villageList', [{ id: item.villageId, name: item.villageName }])
            }
            item.key = nanoid()
            
          })
        }

      },
      immediate: true
    }
  },
  data() {
    return {

    }
  },
  components: {
    Address
  },
  methods: {
    getAddress(val) {
      const obj = this.list[val.index]
      obj.provinceId = val.provinceId || ""
      obj.provinceName = val.provinceName || ""
      obj.cityId = val.cityId || ""
      obj.cityName = val.cityName || ""
      obj.areaId = val.areaId || ""
      obj.areaName = val.areaName || ""
      obj.streetId = val.streetId || ""
      obj.streetName = val.streetName || ""
      obj.levels = val.levels
      obj.villageId = ""
      obj.villageName = ""
      obj.villageList = []
    },
    // 获取小区列表
    getVillage(row,index) {
      // 点击小区的时候调用接口
      const { provinceId, cityId, areaId, streetId, levels } = row
      if (levels > 2) {
        let param = {
          provinceId,
          cityId,
          areaId,
          streetId,
          name: "",
        }
        VillageApi.villageList(param).then(res => {
          this.$set(row, 'villageList', res.data)
        })
        
      }
    },
    handleVillageChange(row) {
      const { villageId } = row
      if (!villageId) {
        row.villageName = ""
        return
      }
      const res = row.villageList.find(item => item.id == villageId)
      row.villageName = res.name
    },
    getKey(){
      return nanoid()
    },
    fromatAddressList(row) {
      const { provinceId, cityId, areaId, streetId, provinceName, cityName, areaName, streetName } = row
      const arr = []
      if (provinceId) {
        arr.push(provinceId)
        arr.push(provinceName)
      }
      if (cityId) {
        arr.push(cityId)
        arr.push(cityName)
      }
      if (areaId) {
        arr.push(areaId)
        arr.push(areaName)
      }
      if (streetId) {
        arr.push(streetId)
        arr.push(streetName)
      }
     
      return arr
    },
    sub(index) {
      this.list.splice(index, 1)
    },
    add() {
      this.list.push({
        provinceId: "",
        provinceName: "",
        cityId: "",
        cityName: "",
        areaId: "",
        areaName: "",
        streetId: '',
        streetName: "",
        villageId: "",
        villageName: "",
        levels: "",
        villageList: [],
        key:nanoid()
      })
    },
    // 地区去重
    removeDup() {
      const list = []
      this.list.forEach(item => {
        if (!list.length || !list.some(item2 => this.judgeAddressEquip(item2, item))) {
          if (item.provinceId) {
            list.push(item)
          }

        }
      })
      this.list.length = 0
      this.list.push.apply(this.list, list)
    },
    judgeAddressEquip(obj1, obj2) {
      if (obj1.provinceId != obj2.provinceId && obj1.provinceId) return false
      if (obj1.cityId != obj2.cityId && obj1.cityId) return false
      if (obj1.areaId != obj2.areaId && obj1.areaId) return false
      if (obj1.streetId != obj2.streetId && obj1.streetId) return false
      if (obj1.villageId != obj2.villageId && obj1.villageId) return false
      return true
    },
    confirm() {
      this.removeDup()
      this.$emit("confirm")
    },
    cancel() {
      this.$emit('update:show', false)
    }
  }
}
</script>
  
<style lang="scss" scoped>

  
</style>
  
  